<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	
	<body>
		<header>
			<h2 class="title_color">Web可访问性编写</h2>
		</header>
		
		<mian>
		<div class="box">
			<div class="title">摘要</div>
			<p class="p">这个页面给予你一些基础的应当考虑的点去帮助你开始编写更多的让残疾人也可以访问的内容。这些技巧
				对你帮助你学习WCAG要求是一个很好的练习。跟随这些链接去接触WCAG要求，详细的在理解文档的背
				景下，更多地由教程，用户故事来引导你学习。</p>
		<picture style="width: 600px; height: 400px;"><img src="img/1.png"></picture>
		</div>
		<!--放置图片-->
		
		<div class="box">
			<div class="title">提供富含信息的，独特的页面标题</div>
			<p class="p">每一个页面，都要有一个提供描述页面内容以及能够使他与其他页面区分开来的短开头。这个页面标题正常
				情况下与页面的主标题类似。首先放置着独特的更加有关系的信息，例如，放置页面的名字在组织名之前。
				每个页面都是一个多步进程，包括在页面标题中的当前步骤。</p>
				
		<picture style="width: 600px; height: 400px;"><img src="img/2.png"></picture>
		</div>
		
		<div class="box">
			<div class="title">使用标题去覆盖意思和结构</div>
			<p class="p">使用短标题去组中段落以及清楚对的部分描述。好的标题提供了一个内容的大纲。</p>
		<picture style="width: 600px; height: 400px;"><img src="img/3.png"></picture>
		</div>
		
		<div class="box">
			<div class="title">让链接文字更加有意义</div>
			<p class="p">编写链接中的文字是为了去描述链接目标的内容。避免使用模棱两可的链接文字，例如“点击这里”或者“阅读
				更多”。表示相关的关于链接目标的信息，例如文档的类型和大小，像“私人文档（RTF，20MB）”</p>
		<picture style="width: 600px; height: 400px;"><img src="img/4.png"></picture>	
		</div>
		
		<div class="box">
			<div class="title">为图像编写有意义的文本替代</div>
			<p class="p"> 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。</p>
		<picture style="width: 600px; height: 400px;"><img src="img/5.png"></picture>		
		</div>
		
		<div class="box">
			<div class="title">创建多媒体文字记录和字幕</div>
			<p class="p"> 对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供
                字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还
                包括重要视觉内容的描述，例如“ Athan离开房间”。</p>
		<picture style="width: 600px; height: 400px;"><img src="img/6.png"></picture>	
		</div>
		
		<div class="box">
			<div class="title">提供明确的架构</div>
			<p class="p"> 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。</p>
		<picture style="width: 600px; height: 400px;"><img src="img/7.png"></picture>	
		</div>
		
		<div class="box">
			<div class="title">保持内容简洁明了</div>
			<p class="p"> 根据情况，使用简单的语言和格式。</p>
			<p class="p2">
				&bull; 撰写简短明了的句子和段落。<br/>
				&bull; 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。<br/>
				&bull; 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。<br/>
				&bull; 考虑为读者可能不知道的术语提供词汇表。<br/>
				&bull; 适当使用列表格式。<br/>
				&bull; 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。<br/>
			</p>
			<picture style="width: 600px; height: 400px;"><img src="img/8.png"></picture>
		</div>
		
		
		<div class="box">
			<div class="title">了解有关辅助功能的更多信息</div>
			<p class="p">  这些技巧是您需要进行Web访问的一些注意事项。以下资源可帮助您了解为什么可访问性很重要，以及有关使残
				障人士更易访问网络的准则。
			</p>
			<p class="p2">
				&bull; <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/" style="text-decoration:none; font-size:15px; color:blue;">辅助功能简介</a><br/>
				<p>介绍辅助功能并提供许多有用资源的链接</p>
				
				&bull; <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/" style="text-decoration:none; font-size:15px; color:blue;">易访问性原则</a><br/>
				<p>- 一个介绍WCAG要求</p> 
				
				&bull; <a href="https://www.w3.org/WAI/people-use-web/" style="text-decoration:none; font-size:15px; color:blue;">残疾人如何使用网络</a><br/>
				<p>- 现实生活中的例子表明了残疾人无障碍获取的重要性</p>
				
				&bull; <a href="https://www.w3.org/WAI/WCAG21/quickref/" style="text-decoration:none; font-size:15px; color:blue;">如何满足WCAG</a><br/>
				<p>（快速参考） - 所有WCAG要求和技术的可定制参考</p>
			</p>	
		</div>
		</mian>
		
	</body>
</html>
